<template>
  <view class="page-container">
    <!-- 最新资讯标题 -->
    <view class="news-title">最新资讯</view>

    <!-- 循环渲染新闻组件 -->
    <view 
      v-for="(item, index) in dataList" 
      :key="index" 
      style="margin: 10rpx;"
    >
      <CustomTextView
        :title="item.title"
        :isTop="item.isTop"
        :author="item.author"
        :comments="item.comments"
        :time="item.time"
        @titleClick="goDetail"
        @authorClick="showAuthor"
      >
        <!-- 默认插槽内容 -->
        <view class="slot-content">这是组件的默认插槽内容~</view>
        
        <!-- 具名插槽：tips（搜索提示区域，强制同一行） -->
        <template v-slot:tips>
          <view class="tips-container" v-if="item.showSearch">
            <text class="tips-label">搜索：</text>
            <view class="tips-tags">
              <view class="tips-tag" @click="handleSearch('今日金价')">
                <text>今日金价</text>
              </view>
              <view class="tips-tag" @click="handleSearch('精选好物')">
                <text>精选好物</text>
              </view>
            </view>
          </view>
        </template>
      </CustomTextView>
    </view>
  </view>
</template>

<script>
import CustomTextView from "../../../components/cardViewText.vue"

export default {
  components: {
    CustomTextView
  },
  data() {
    return {
      dataList: [
        {
          title: "乘势而上，续写中国奇迹新篇章—党的二十届四中全会侧记",
          isTop: true,
          author: "新华社",
          comments: 56,
          time: "2025.10.25"
        },
        {
          title: "黄金还能走多远?卖方高呼“第三浪启动”，230多份研报看多",
          isTop: true,
          author: "财联社",
          comments: "452",
          time: "2025.10.07",
          showSearch: true
        },
        {
          title: "14个月从0家开到100家门店，蜜雪冰城如何做到",
          isTop: false,
          author: "央视新闻",
          comments: 102,
          time: "2025.10.20"
        },
        {
          title: "视频画报｜携手开创亚太发展新时代",
          isTop: false,
          author: "新华社",
          comments: "91.1万",
          time: "2025.10.29"
        },
        {
          title: "年轻人关心的这些事，“十五五”规划建议都提到了",
          isTop: false,
          author: "人民日报客户端",
          comments: "223万",
          time: "2025.10.29"
        },
        {
          title: "【理响中国】解码中华文明 | 从未停更的大地史书——中华文明具有突出的连续性",
          isTop: false,
          author: "中国人民网",
          comments: "110万",
          time: "2025.10.29"
        },
        {
          title: "喜欢您来！福建美味“不基础”",
          isTop: false,
          author: "福州日报",
          comments: 9999,
          time: "2025.10.29"
        },
        {
          title: "“双节”假期福建礼物市集人气旺 市民游客赶集看好戏",
          isTop: false,
          author: "东南网",
          comments: "135万",
          time: "2025.10.29"
        },
        {
          title: "福建隐藏的“吃货天堂”，弓鱼术竟成为鱼鲜秘诀？",
          isTop: false,
          author: "福州日报",
          comments: "520万",
          time: "2025.10.29"
        },
      ]
    }
  },
  methods: {
    goDetail(title) {
      uni.showToast({
        title: `点击标题：${title}，跳转详情页`,
        icon: "none"
      })
    },
    showAuthor(author) {
      uni.showModal({
        title: "作者信息",
        content: `作者：${author}`
      })
    },
    handleSearch(keyword) {
      uni.showToast({
        title: `触发搜索：${keyword}`,
        icon: "none"
      })
    }
  }
}
</script>

<style scoped>
/* 根容器样式 - 浅灰背景营造清爽感 */
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20rpx 15rpx;
}

/* 标题样式 - 深蓝主色调 */
.news-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90rpx;
  font-size: 38rpx;
  font-weight: 600;
  margin-bottom: 25rpx;
  color: #1a365d;
  position: relative;
}

/* 标题装饰线 */
.news-title::after {
  content: '';
  position: absolute;
  bottom: 15rpx;
  width: 50rpx;
  height: 6rpx;
  background-color: #3182ce;
  border-radius: 3rpx;
}

/* 默认插槽样式 - 淡蓝底色增强区分度 */
.slot-content {
  background-color: #edf2f7;
  padding: 15rpx 20rpx;
  margin: 15rpx 0;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #4a5568;
  line-height: 1.6;
}

/* tips插槽样式 - 改用蓝灰色系 */
.tips-container {
  display: flex;
  align-items: center;
  background-color: #ebf8ff;
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  margin: 15rpx 0;
  width: 100%;
  box-sizing: border-box;
  border-left: 5rpx solid #3182ce;
}

.tips-label {
  font-size: 28rpx;
  color: #2b6cb0;
  margin-right: 15rpx;
  white-space: nowrap;
  font-weight: 500;
}

.tips-tags {
  display: flex;
  gap: 15rpx;
  flex-wrap: nowrap;
}

.tips-tag {
  padding: 8rpx 18rpx;
  background-color: #fff;
  border: 1.5rpx solid #90cdf4;
  border-radius: 25rpx;
  font-size: 26rpx;
  color: #2c5282;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tips-tag:hover {
  background-color: #e6fffa;
  border-color: #3182ce;
}

/* 为新闻卡片添加全局样式（影响CustomTextView组件外部容器） */
::v-deep .custom-text-view {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

::v-deep .custom-text-view:hover {
  transform: translateY(-3rpx);
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);
}

/* 置顶新闻标记样式 */
::v-deep .is-top-tag {
  background-color: #3182ce !important;
  color: #fff !important;
  padding: 3rpx 12rpx !important;
  border-radius: 4rpx !important;
  margin-right: 10rpx !important;
  font-size: 24rpx !important;
}

/* 新闻标题样式 */
::v-deep .news-title-text {
  color: #1a365d !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 15rpx !important;
}

/* 作者和时间信息样式 */
::v-deep .news-meta {
  color: #718096 !important;
  font-size: 26rpx !important;
}
</style>